import ReactEcharts from "echarts-for-react";
import {color, val} from "../../pages/Echarts/finance/financeData.ts";

function Consume() {
    const option = {
        color: color.reverse(),
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                // 修改空心元大小
                radius: ['20%', '80%'],
                center: 'center',
                // 添加3D效果 阴影
                itemStyle: {
                    shadowBlur: 30,
                    shadowOffsetX: 5,
                    shadowOffsetY: 5,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',

                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 40,
                        shadowOffsetX: 10,
                        shadowOffsetY: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: val.reverse(),
                roseType: 'angle', // 设定为饼图
                animationType: 'scale', // 使用缩放动画
                animationEasing: 'elastic' // 采用弹性动画
            }
        ]
    };
    return (
        <div style={{width: '100%', height: '100%'}}>
            <ReactEcharts style={{width: '100%', height: '100%'}} option={option}/>
        </div>
    )
}

export default Consume;